@contentOffsetWidth: 700px;
@sidePadding: 25px;

.centerWrap {
  background-color: #fff;
  box-shadow: #36a2e1 0px 0px 25px;
  box-sizing: border-box;
  position: fixed;
  z-index: 5000;
  font-size: 14px;
  display: none;
  width: @contentOffsetWidth;
  left: -340px;
  margin-left: 50%;
  top: 4vh;
  color: #444;
  padding: 20px 0px;
  border-radius: 15px;
  overflow: hidden;

  hr {
    border: none;
    height: 1px;
    background: none;
    margin: 5px 0;
  }

  p,
  div,
  span,
  ul,
  li,
  input {
    padding: 0;
    margin: 0;
  }

  p {
    line-height: 26px;
    min-height: 26px;
    height: auto;
    margin: 0;
  }

  .tip {
    color: #999;
  }

  .blue {
    color: @themeBlue !important;
  }

  .has_tip:hover,
  label:hover {
    color: @themeBlue !important;
  }

  .fwb {
    font-weight: 700;
  }

  .gray1 {
    color: #777;
  }

  .hidden {
    display: none;
  }

  .textButton {
    border: none;
    background: none;
    outline: none;
    padding: 1px 6px;
    cursor: pointer;
  }

  .centerWrap_head {
    padding: 0 @sidePadding;

    img {
      width: 16px;
      vertical-align: inherit;
    }

    .centerWrap_title {
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      position: relative;
    }

    .btns {
      position: absolute;
      right: 0;
      top: 0;

      .centerWrap_top_btn {
        font-size: 20px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        color: #666;
        fill: #666;
        user-select: none;
        display: inline-block;

        &.update {
          display: none;
        }

        &.github_icon {
          color: #777;
        }

        .icon {
          vertical-align: initial;
          padding-top: 5px;
        }
      }
    }
  }

  .centerWrap_tabs {
    display: flex;
    padding: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;

    .title {
      text-align: center;
      width: 100%;
      flex: 1;
      font-size: 1.1em;
      cursor: pointer;
      height: 36px;
      line-height: 36px;
      position: relative;
    }

    .title.active {
      color: @themeBlue;

      &::after {
        content: '';
        width: 100%;
        height: 2px;
        background: @themeBlue;
        position: absolute;
        top: 36px;
        left: 0;
        z-index: 1001;
      }
    }

    .title:hover {
      color: @themeBlue;
    }
  }

  .centerWrap_con {
    overflow: auto;
    max-height: 76vh;
    padding-left: @sidePadding;
    // 主要内容区域只设置左 padding，不设置右 padding，因为右边要显示滚动条，所以要多留出可用区域
    .settingForm {
      position: relative;
      // 表单区域设置最大宽度，使其与右侧滚动条保持距离，否则里面的内容会紧贴着滚动条，很难看
      max-width: 650px;

      select {
        width: 80px;
        height: 20px;
        vertical-align: middle;
        border-radius: 4px;
        border: 1px solid rgb(204, 204, 204);
      }

      option {
        font-size: 14px !important;
        line-height: 24px;
      }

      p * {
        vertical-align: middle;
        line-height: 1;
      }

      p strong {
        vertical-align: baseline;
      }

      .centerPanelTextArea {
        font-family: 'aria';
        color: @beautifyBlue;
        font-size: 14px;
        line-height: 1.5;
        background: transparent;
        padding: 5px 5px 1px;
        width: 100%;
        min-height: 20px;
        resize: none;
        border: none;
        border-bottom: 1px solid #ccc;
      }

      #tipCreateFolder {
        display: none;
      }

      .flexTip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: auto;
        }
      }

      .tipWithBtn {
        .left {
          display: inline-block;
        }
        .right {
          display: inline-block;
          margin-left: 20px;
        }
      }

      .need_beautify {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
      }

      label {
        cursor: pointer;
      }

      .tabsContnet {
        display: none;
        &:first-child {
          display: block;
        }
      }

      /*--------美化作为开关的复选框------------*/

      label.active {
        color: @beautifyBlue;
      }

      .beautify_switch {
        display: inline-block;
        width: 24px;
        height: 14px;
        position: relative;
        border-radius: 7px;
        background: #ccc;
        transition: all 0.3s;
        cursor: pointer;
        transition: all 0.3s;
      }

      .beautify_switch::before {
        content: '';
        position: absolute;
        top: 1px;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: #fff;
        left: 0;
        margin-left: 0px;
        transition: all 0.3s;
      }

      .checkbox_switch:checked + .beautify_switch {
        background: @beautifyBlue;
      }

      .checkbox_switch:checked + .beautify_switch::before {
        margin-left: 12px;
      }

      /*--------美化普通的复选框------------*/
      .beautify_checkbox {
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        background-color: #fff;
        z-index: 1;
        transition: all 0.3s;
        cursor: pointer;
      }

      .beautify_checkbox::after {
        box-sizing: content-box;
        content: '';
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: all 0.2s;
        transform-origin: center;
      }

      .checkbox_common:checked + .beautify_checkbox {
        background: @beautifyBlue;
        border: 1px solid @beautifyBlue;
      }

      .beautify_checkbox:hover {
        border: 1px solid @beautifyBlue;
      }

      .checkbox_common:checked + .beautify_checkbox::after {
        transform: rotate(45deg) scaleY(1);
      }

      .checkbox_common:focus + .beautify_checkbox {
        border: 1px solid @beautifyBlue;
      }

      /*--------美化单选框------------*/
      .beautify_radio {
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 12px;
        height: 12px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
      }

      .beautify_radio::after {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: #fff;
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.15s ease-in;
      }

      .radio:checked + .beautify_radio {
        background: @beautifyBlue;
        border: 1px solid @beautifyBlue;
      }

      .beautify_radio:hover {
        border: 1px solid @beautifyBlue;
      }

      .radio:checked + .beautify_radio::after {
        transform: translate(-50%, -50%) scale(1);
      }

      .showDownTip {
        cursor: pointer;
      }

      .centerWrap_top_btn:hover,
      .showFileNameTip:hover,
      .textButton:hover,
      .textButton:focus,
      .showFileNameResult:hover,
      .help_bar > *:hover,
      .updateActiveClass {
        color: @themeBlue !important;
        fill: @themeBlue !important;
      }

      li {
        list-style: none;
      }

      .download_progress1,
      .right1 {
        position: relative;
      }

      .setinput_style1 {
        width: 50px;
        min-width: 50px;
        line-height: 20px;
        font-size: 14px !important;
        height: 20px;
        text-indent: 4px;
        box-sizing: border-box;
        border: none !important;
        border-bottom: 1px solid #ccc !important;
        outline: 0;
        padding: 0 !important;
        background: none !important;

        &:focus,
        &:hover {
          border-bottom: 1px solid #0096fa !important;
        }

        &.w100 {
          width: 100px;
        }

        &.postDate {
          width: 190px;
        }

        &.bmkNum {
          width: 60px;
        }
      }

      .progressBar1,
      .right1 {
        width: 100%;
      }

      .fileNameRule {
        min-width: 310px;
      }

      .setinput_tag {
        min-width: 300px;
      }

      .showFileNameResult,
      .showFileNameTip {
        cursor: pointer;
      }

      .fileNameTip {
        display: none;
        padding-top: 5px;
      }

      .centerWrap_btns {
        padding: 8px 0 0;
        font-size: 0;
        display: flex;
        flex-wrap: wrap;

        & button {
          background-color: @themeBlue;
          box-sizing: border-box;
          border: none;
          width: 150px;
          margin-right: 10px;
          padding: 8px 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          line-height: 20px;
          border-radius: 5px;
          cursor: pointer;
          margin-bottom: 8px;
          vertical-align: top;
          box-shadow: 0 1px 6px #eee;

          &:hover,
          &:focus {
            opacity: 0.8;
          }
        }
      }

      .centerWrap_btns button,
      .progressTip {
        color: #fff;
        font-size: 14px;
      }

      .progressBarWrap {
        display: none;

        .total {
          display: flex;

          .text {
            margin-right: 10px;
          }

          .right1 {
            flex: 1;
          }
        }

        .progress,
        .progressBar {
          border-radius: 11px;
          height: 22px;
          overflow: hidden;
        }

        .right1 {
          display: inline-block;
          height: 22px;
          vertical-align: middle;
        }

        .progressBar {
          position: absolute;
          background: #6792a2;
        }

        .progress {
          background: #0eb3f3;
          transition: 0.15s;
        }

        .progressTip {
          position: absolute;
          line-height: 22px;
          display: flex;
          justify-content: space-between;
        }

        .progress1 {
          width: 0;
        }

        .progressTip1 {
          width: 100%;
          text-align: center;
        }

        .totalNumberWrap {
          position: absolute;
          height: 22px;
          line-height: 22px;
          color: #fff;
          width: 100%;
          text-align: center;
          span {
            position: initial;
          }
        }

        .progressBarList {
          padding-top: 5px;
          margin: 0;
          padding-left: 0;

          .downloadBar {
            position: relative;
            width: 100%;
            padding: 5px 0;
            height: 22px;
            box-sizing: content-box;
          }

          .progressBar2 {
            width: 100%;
          }

          .progress2 {
            width: 0;
          }

          .progressTip2 {
            width: 100%;
          }

          .fileName {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            vertical-align: top;
            padding: 0 10px;
            flex: 1;
          }

          .loadedWrap {
            display: flex;
            align-items: center;
            padding: 0 10px;
            font: status-bar;
          }
        }
      }

      .download_area {
        display: none;
        .download_status_text_wrap {
          line-height: 26px;
          margin-bottom: 4px;

          & > * {
            padding-right: 5px;
          }

          .down_status {
            color: @themeBlue;
            display: inline-block;
          }
        }
      }

      .settingNameStyle1 {
        cursor: pointer;
        margin-right: 10px;
      }

      .verticalSplit {
        display: inline-block;
        width: 0px;
        height: 16px;
        border-right: 1px solid #ccc;
        margin: 0 10px;
      }

      .saveNamingRuleWrap {
        display: inline-block;
        position: relative;
      }

      .namingRuleList {
        position: absolute;
        right: -30px;
        top: 25px;
        z-index: 1002;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: @boxShadowBlue 0px 0px 10px;
        display: none;

        @liHeight: 30px;

        li {
          padding: 2px 0 2px 0;
          color: #555;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          justify-content: space-between;
          justify-items: center;
          align-items: center;
          min-width: 500px;

          & > * {
            min-height: @liHeight;
            line-height: @liHeight;
          }
        }

        li:hover {
          background: #e3f5ff;
        }

        .rule {
          flex: 1;
          line-height: @liHeight !important;
          padding-left: 20px;
        }

        li:first-child {
          padding-top: 5px;
        }

        li:last-child {
          padding-bottom: 5px;
        }

        .delete {
          padding: 0 15px;
          margin-left: 5px;
          margin-right: 5px;
          font-size: 1.3em;
          color: #999;
          font-weight: lighter;
        }
      }

      .setinput_style1,
      .setinput_style1:focus,
      .setinput_style1:hover {
        background: transparent !important;
      }
    }

    .help_bar {
      // padding:0 @sidePadding;
      line-height: 24px;

      & > * {
        padding: 0 3px;
      }
    }
  }
}

.theme-dark {
  &.centerWrap {
    background: #222;
    box-shadow: @darkBoxShadow 0px 0px 15px;
    color: #fff;

    button,
    .tip {
      color: #fff;
    }

    .gray1 {
      color: #bbb;
    }

    .blue,
    .has_tip:hover,
    label:hover,
    .title.active,
    .title:hover,
    .down_status {
      color: @beautifyBlue !important;
    }

    .centerWrap_top_btn:hover,
    .showFileNameTip:hover,
    .textButton:hover,
    .textButton:focus,
    .showFileNameResult:hover,
    .help_bar > *:hover,
    .updateActiveClass {
      color: @beautifyBlue !important;
      fill: @beautifyBlue !important;
    }

    .saveNamingRuleWrap {
      color: #fff;

      button {
        color: #fff;
      }

      .namingRuleList {
        background: #222;
        box-shadow: @darkBoxShadow 0px 0px 10px;

        li {
          color: #fff;
        }

        li:hover {
          background: #333;
        }
      }
    }
    .centerWrap_btns {
      & button {
        box-shadow: none !important;
      }
    }
  }
}

.downloadError {
  color: rgb(255, 160, 160);
}

.patronText {
  display: none;
}

#xzBG {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  opacity: 0.4;
  // filter: blur(1px);
}

.xzBG {
  // 当设置了背景图片时，不管是什么主题，都把中间面板的样式修改为 Dark 主题的样式，并且添加文字阴影，使文字更容易阅读
  &.centerWrap {
    text-shadow: 0px 0px 5px #006a9b;

    box-shadow: @darkBoxShadow 0px 0px 15px;
    background: #222;
    color: #fff;

    button,
    .tip {
      color: #fff;
    }

    .gray1,
    .centerWrap_top_btn {
      color: #ddd !important;
    }

    .textButton,
    input {
      text-shadow: 0px 0px 5px #006a9b;
    }

    .blue,
    .has_tip:hover,
    label:hover,
    .title.active,
    .title:hover,
    .down_status {
      color: @beautifyBlue !important;
    }

    .centerWrap_top_btn:hover,
    .showFileNameTip:hover,
    .textButton:hover,
    .textButton:focus,
    .showFileNameResult:hover,
    .help_bar > *:hover,
    .updateActiveClass {
      color: @beautifyBlue !important;
      fill: @beautifyBlue !important;
    }

    .progressBar {
      background-color: #6e9dad !important;
    }

    .saveNamingRuleWrap {
      color: #fff;

      button {
        color: #fff;
        text-shadow: none;
      }

      .namingRuleList {
        text-shadow: none;
        opacity: 0.9 !important;
      }
    }

    .centerWrap_btns {
      & button {
        box-shadow: none !important;
      }
    }
  }
}

.lang_zh-cn input[name='workDirNameRule'] {
  width: 200px !important;
}

.lang_zh-tw input[name='workDirNameRule'] {
  width: 200px !important;
}

.lang_en input[name='workDirNameRule'] {
  width: 138px !important;
}

.lang_ja input[name='workDirNameRule'] {
  width: 170px !important;
}
